<template>
	<Loading v-show="isLoading"></Loading>
	<div class="main">
		<ul>
			<li v-for="(item,index) in reportList" :key="item.id">
				<a href="javascript:;">
					<div class="report-top">
						<div class="report-date">时间：{{item.createTime}}</div>
						<div v-if="item.status==1" class="report-status report-status-start">未开始</div>
						<div v-else-if="item.status==2" class="report-status report-status-wait">待受理</div>
						<div v-else-if="item.status==3" class="report-status report-status-end">已完成</div>
						<div v-else class="report-status report-status-start">已驳回</div>
					</div>
					<div class="report-middle">
						<ul>
							<li>
								<div class="report-middle-title">类型：</div>
								<div v-if="item.type==1" class="report-middle-content">提问</div>
								<div v-else-if="item.type==2" class="report-middle-content">投诉</div>
								<div v-else class="report-middle-content">举报</div>
							</li>
							<li>
								<div class="report-middle-title">对象：</div>
								<div class="report-middle-content">{{item.reportObj}}</div>
							</li>
							<li>
								<div class="report-middle-title">部门：</div>
								<div class="report-middle-content">{{item.leaderName}}</div>
							</li>
						</ul>
					</div>
					<div class="report-bottom">
						<div class="report-sender">发送人：{{item.studentName}}</div>
						<div class="report-mp">联系方式：{{item.studentMp}}</div>
					</div>
				</a>
			</li>
			
			
		</ul>
	</div>
</template>

<script>
//引入组件
import Loading from '@/components/wechat/index/Loading.vue'
//引入js	
import router from '../../../router'
//import {request} from '../../../utils/request'

export default {
	name: 'ReportList',
	components: {
		Loading
	},
    data(){
		return {
			isLoading:true,//监控页面是否加载完毕
			ajaxFlag:true,//监控ajax请求，避免多次请求
			ajaxData:{},//ajax提交的值
			
			reportList:[]
		}
    },
    created:function(){
		var that=this;
		var token=localStorage.getItem('token');
		request({
			headers:{
				'Content-Type': 'application/json;charset=UTF-8',
				'Authorization':token
			},
			url: "/wechatLawyer/reportList",
			method: "post",
			data:that.ajaxData
		}).then(function(res){
		   if(res.flag){
			   that.reportList=res.reportList;
		   }else{
			   router.push({path:'/wechat/lawyerLogin'});
			   return 0;
		   }
		   that.isLoading=false;
		}).catch(function(error){
			console.log(error);
			that.isLoading=false;
		})
  	},
  	beforeMount: function() {
		
    },
  	mounted: function () {
  		
  	},
  	methods:{
  		
  	}
}
</script>

<style lang="scss" scoped>
.main{
     width:100%;
     overflow:hidden;
     position:relative;
}
.main>ul{
	width: 100%;
	background-color: #f1f1f1;
	overflow: hidden;
}
.main>ul>li{
	width: 100%;
	margin-top: 0.625rem;
	background-color: #FFFFFF;
}
.main>ul>li>a{
	width: 100%;
	display: block;
	color: #000;
}
.report-top{
	width: 96%;
	margin: auto;
	overflow: hidden;
	border-bottom: 1px dashed #d1d1d1;
}
.report-date{
	line-height: 2rem;
	font-size: 0.875rem;
	float: left;
	margin-top: 0.375rem;
	margin-bottom: 0.375rem;
	margin-left: 0.625rem;
}
.report-status{
	width:3.75rem ;
	font-size: 0.875rem;
	line-height: 1.75rem;
	text-align: center;
	border-radius: 0.875rem;
	float: right;
	margin-top: 0.5rem;
	margin-right: 0.625rem;
}
.report-status-start{
	background-color: #fae1e7;
	color: #e77388;
}
.report-status-wait{
	background-color: #fff4e8;
	color: #d8b58b;
}
.report-status-end{
	background-color: #e3f6fa;
	color: #55bdb2;
}
.report-middle{
	width: 96%;
	margin: auto;
}
.report-middle>ul{
	width: 100%;
}
.report-middle>ul>li{
	width: 100%;
	display: flex;
	font-size: 0.75rem;
}
.report-middle-title{
	width: 20%;
	text-indent: 0.625rem;
	line-height: 1.5rem;
}
.report-middle-content{
	width: 80%;
	color: #727272;
	line-height: 1.5rem;
}
.report-bottom{
	width: 100%;
	display: flex;
	font-size: 0.875rem;
	background-color: #fafafa;
	line-height: 1.5rem;
}
.report-sender{
	width: 48%;
	margin-left: 2%;
	text-indent: 0.625rem;
	margin-top: 0.625rem;
	margin-bottom: 0.625rem;
}
.report-mp{
	width: 50%;
	text-indent: 0.625rem;
	margin-top: 0.625rem;
	margin-bottom: 0.625rem;
}
</style>
